<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <BNavbar
    v-b-color-mode="'dark'"
    toggleable="sm"
    variant="primary"
    container
    sticky="top"
  >
    <BNavbarBrand href="#">NavBar</BNavbarBrand>
    <BNavbarToggle target="nav-collapse" />
    <BCollapse id="nav-collapse" is-nav>
      <BNavbarNav>
        <BNavItem href="#">Link</BNavItem>
        <BNavItem href="#" disabled>Disabled</BNavItem>
      </BNavbarNav>
      <!-- Right aligned nav items -->
      <BNavbarNav class="ms-auto mb-2 mb-lg-0">
        <BNavItemDropdown text="Lang" right>
          <BDropdownItem href="#">EN</BDropdownItem>
          <BDropdownItem href="#">ES</BDropdownItem>
          <BDropdownItem href="#">RU</BDropdownItem>
          <BDropdownItem href="#">FA</BDropdownItem>
        </BNavItemDropdown>
        <BNavItemDropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <BDropdownItem href="#">Profile</BDropdownItem>
          <BDropdownItem href="#">Sign Out</BDropdownItem>
        </BNavItemDropdown>
      </BNavbarNav>
      <BNavForm class="d-flex">
        <BFormInput class="me-2" placeholder="Search" />
        <BButton type="submit" variant="outline-success">Search</BButton>
      </BNavForm>
    </BCollapse>
  </BNavbar>
  <BCarousel controls>
    <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=1" />
    <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=2" />
    <BCarouselSlide img-src="https://picsum.photos/1024/480/?image=3" />
  </BCarousel>
  <BContainer class="bd-example-cols">
    <BRow gutter-x="5" gutter-y="2">
      <BCol><div class="p-3">Row column</div></BCol>
      <BCol>Column</BCol>
      <BCol>Column</BCol>
      <BCol>Column</BCol>
      <BCol>Column</BCol>
      <BCol>Column</BCol>
    </BRow>
  </BContainer>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <BButton variant="primary">Primary</BButton>
  <BPopover :click="true" :close-on-hide="true" :delay="{ show: 0, hide: 0 }">
    <template #target>
      <BButton>Click me. Popover closes when clipped</BButton>
    </template>
    Scroll me out of view
  </BPopover>
</template>
<script></script>
<style lang="scss">
.bv-example-row [class^=col], .bd-example-cols [class^=col]>*, .bd-example-cssgrid [class*=grid]>* {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(var(--bd-violet-rgb), .15);
    border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
</style>
